<template>
	<view class="">
		<view class="content">
			<view class="selector-wrapper">
				<view class="selected" :class="{'open': showSelector}" @click="showSelector = !showSelector">选择币种<text class="green-F">{{selectorList[selectorIndex]}}</text></view>
				<view class="selector-box" v-show="showSelector">
					<view class="selector-item" v-for="(item,index) in selectorList" :key="index" @click="selectorIndex=index;showSelector=false">{{item}}</view>
				</view>
			</view>
			<view class="img-box">
				<image :src="address.img" mode=""></image>
			</view>
			<view class="address-box">{{address.text}}</view>
			<view class="save-btn" @click="save()">保存二维码</view>
			<view class="copy-btn" @click="copy()">复制充值地址</view>
		</view>
		<tabbar-diy :isIndex="4" :isInner="true"></tabbar-diy>
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				isIndex: 4,
				showSelector: false,
				selectorList: ['ETH','USDT','BTC'],
				selectorIndex: 0,
				address: {
					text: '0x23egb16dFB...1f9bfA302295',
					img: '../../../static/images/recharge-img.png'
				}
			}
		},
		components:{
			tabbarDiy
		},
		onShow(){
			console.log(11)
		},
		onLoad() {
			_self = this;
		},
		methods: {
			copy(){
				uni.setClipboardData({
					data: _self.address.text,
					success: function(data) {
						uni.showToast({
							title: "success",
						})
					},
					fail: function(err) {
						console.log("fail");
					},
					complete: function(res) {},
				});
			},
			save(){
				uni.downloadFile({
					url: _self.address.img,
					success: (res2) => {
						if (res2.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res2.tempFilePath,
								success: function() {
									uni.showToast({
										title: "success"
									});
								},
								fail: function() {
									uni.showToast({
										title: "fail",
										icon: "none"
									});
								}
							});
						}
					}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
	
	.content{
		color: #FFFFFF;
		padding-top: 20rpx;
		min-height: 100vh;
		box-sizing: border-box;
		text-align: center;
	}
	
	.selector-wrapper{
		width: 686rpx;
		height: 84rpx;
		margin: 0 auto 78rpx;
		border-radius: 6rpx;
		background-color: #202A33;
		
		.selected{
			padding: 0 40rpx;
			font-size: 25rpx;
			line-height: 84rpx;
			position: relative;
			text-align: left;
			
			.green-F{
				margin-left: 15rpx;
			}
		}
		.selected::after{
			content: '';
			display: inline-block;
			width: 0rpx;
			height: 0rpx;
			border-top: 9rpx solid rgba($color: #ffffff, $alpha: 1);
			border-left: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-right: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-bottom: 9rpx solid rgba($color: #000000, $alpha: 0);
			position: absolute;
			top: 38rpx;
			right: 40rpx;
		}
		.selected.open::after{
			content: '';
			display: inline-block;
			width: 0rpx;
			height: 0rpx;
			border-right: 9rpx solid rgba($color: #ffffff, $alpha: 1);
			border-top: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-left: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-bottom: 9rpx solid rgba($color: #000000, $alpha: 0);
			position: absolute;
			top: 34rpx;
			right: 44rpx;
		}
		.selector-box{
			padding: 10rpx 60rpx;
			position: relative;
			left: 0rpx;
			top: 0rpx;
			background-color: #071724;
			// border-bottom: 2rpx solid #202A33;
			// border-top: none;
			z-index: 3;
		}
		
		.selector-item{
			font-size: 25rpx;
			line-height: 60rpx;
		}
	}
	
	.img-box{
		width: 258rpx;
		height: 258rpx;
		margin: 0 auto;
		
		image{
			width: 258rpx;
			height: 258rpx;
		}
	}
	.address-box{
		color: #BFBFBF;
		font-size: 27rpx;
		margin: 58rpx auto 71rpx;
	}
	.save-btn{
		width: 450rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		margin: 0 auto;
		background-color: #0DD4BB;
		font-size: 24rpx;
	}
	.copy-btn{
		width: 450rpx;
		height: 60rpx;
		line-height: 56rpx;
		border-radius: 8rpx;
		border: 2rpx solid #0DD4BB;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 38rpx;
		font-size: 24rpx;
		background-color: #071724;
	}
</style>
